<template>
  <div class="activity">
    <Top title="活动" iconShow='1'></Top>
    <div class="activity-content">
      <div class="activity-content-item" v-for="(item,index) in activityList" :key="index" @click="goActivityDetail(item.id)">
        <div class="activity-content-item-img">
          <img :src="item.img" alt="">
        </div>
        <div class="activity-content-item-desc">
          <div class="activity-content-item-desc-title">{{item.title}}</div>
          <div class="activity-content-item-desc-detail">
            查看详情<i class="iconfont icon-jiankuohaoxiyou"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import '../../../js/lib/flexble.js'
import commons from '../../../common/js/common.js'
import Top from 'components/Header/Header'
import { Indicator, MessageBox } from "mint-ui";
export default {
  name: 'Active',
  components: { Top },
  data() {
    return {
      activityList:[]
    }
  },
  mounted(){
    Vue.http.interceptors.push((request, next) => { //请求拦截器
      //请求前
      request.headers.set('token', commons.getCookie('token')); //设置请求头
      Indicator.open('加载中...'); //请求loading
      next((response) => {
        //请求后
        Indicator.close(); //隐藏loading
        return response
      })
    })
    this.$http.get("/loansupermarket-app/index/getActivity")
      .then((response) => {
        var resBody = response.body;
        this.activityList = resBody.data;
      });
      sessionStorage.setItem('newMessage',true);
  },
  methods: {
    goActivityDetail(id){
      // this.$router.push({path:'/main/mine/mydiscover/messageselected',query:{id:id}})
      window.location.href='../news/article.html?id='+id;
    }
    
  }
}
</script>
<style lang="scss">
@import '../../../scss/base.scss';
.activity {
  &-content {
    box-sizing: border-box;
    padding: 0 0.4rem;
    margin-top: 1.4rem;
    &-item {
      margin-bottom: 0.28rem;
      border-radius: 0.12rem;
      overflow: hidden;
      width: 100%;
      // height: 5.84rem;
      background: #fff;
      &-img {
        width: 100%;
        height: 4rem;
        img{
          width: 100%;
          height: 100%;;
        }
      }
      &-desc {
        box-sizing:border-box;
        padding: 0 0.25rem;
        &-title {
          text-align: left;
          line-height: 0.9rem;
          font-size: 0.36rem;
          width: 100%;
          // height: 0.9rem;
          background: #fff;
          border-bottom: 1px solid #e4e4e4;
        }
        &-detail{
          text-align: left;
          line-height: 0.9rem;
          font-size: 0.3rem;
          .iconfont{
            float: right;
          }
        }
      }
    }
  }
}

</style>
